const Mixin = {
  data() {
    return {
      dialog: {
        add: {
          fullscreen: false,
          width: '380px',
          maxWidth: 960,
          visible: false,
          title: '新增',
          closeOnClickModal: false
        },
        edit: {
          fullscreen: false,
          width: '380px',
          maxWidth: 960,
          visible: false,
          title: '新增',
          closeOnClickModal: false
        }
      },
      form: {
        edit: {},
        add: {},
        inlineMessage: false,
        statusIcon: false,
        labelWidth: '80px',
        size: 'small'
      },
      submit: {
        add: {
          url: '',
          method: 'POST',
          showMsg: true
        },
        edit: {
          url: '',
          method: 'PUT',
          showMsg: true
        }
      },
      table: {
        loading: true,
        stripe: false,
        border: false,
        highlightCurrentRow: false,
        btnSize: 'mini',
        cellBtnSize: 'mini',
        fillHeight: 125,
        size: 'mini',
        headerClass: 'table-header'
      },
      pagination: {
        pageSizes: [10, 20, 30, 50, 100],
        imageSizes: [24, 32, 40, 48, 56],
        layout: 'total, sizes, prev, pager, next, jumper',
        simpleLayout: 'total, sizes, prev, next, jumper',
        background: false,
        currentPage: 7,
        prevText: '上一页',
        nextText: '下一页',
        small: false
      },
      isPage: true,
      url: '',
      action: '',
      page: {},
      queryParams: {
        pageSize: 20
      },
      editIndex: -1,
      bodyHeight: process.client ? document.body.clientHeight : 0,
      bodyWidth: process.client ? document.body.clientWidth : 0,
      isResize: true,
      editLoad: true,
      staticPath: '/'
    }
  },
  methods: {
    // 数据加载
    loadData: function(isReload) {
      this.queryParams.curPage = isReload ? 1 : this.queryParams.curPage
      this.table.loading = true
      this.ajaxGet({
        url: this.url,
        params: this.queryParams,
        callback: data => {
          this.table.loading = false
          this.page = data
          this.loadSuccess && this.loadSuccess(data)
        },
        catch: () => {
          this.table.loading = false
          this.page = {}
        }
      })
    },
    split(val) {
      return this.quevo.isNull(val) ? val : val.split(/[',','|','\n']/)
    },
    handleAdd: function(width) {
      if (width && typeof width !== 'object') {
        this.dialog.add.width = width
      }
      this.dialog.add.visible = true
      this.action = 'add'
    },
    handleEdit: function(index, row, opts) {
      this.editIndex = index
      opts = opts || {}
      if (opts.width) {
        this.dialog.width = opts.width
      }
      this.dialog.edit.visible = true
      this.action = 'edit'
      // this.form.edit = row
      setTimeout(() => {
        Object.assign(this.form.edit, row)
      }, 300)
    },
    removeRecord: function(index, rows) {
      if (rows) {
        rows.splice(index, 1)
        return
      }
      this.page.rows.splice(index, 1)
    },
    submitAdd() {
      this.$refs.submitAddForm.validate(valid => {
        if (!valid) {
          return false
        }
        this.ajaxPost({
          url: this.submit.add.url,
          data: this.qs.stringify(this.form.add),
          loading: true,
          callback: data => {
            this.dialog.add.visible = false
            this.submit.add.showMsg && this.quevoSuccess(data.msg)
            this.loadData()
          }
        })
      })
    },
    submitEdit() {
      this.$refs.submitEditForm.validate(valid => {
        if (!valid) {
          return false
        }
        this.ajaxPut({
          url: this.submit.edit.url + this.form.edit.id,
          data: this.qs.stringify(this.form.edit),
          loading: true,
          callback: data => {
            this.dialog.edit.visible = false
            this.submit.add.showMsg && this.quevoSuccess(data.msg)
            if (this.editIndex >= 0 && this.page.rows[this.editIndex]) {
              Object.assign(this.page.rows[this.editIndex], this.form.edit)
            }
          }
        })
      })
    },
    // 排序
    sortChange: function(column) {
      if (column && column.prop) {
        this.queryParams.sortName = column.prop
        this.queryParams.order = column.order === 'ascending' ? 'ASC' : 'DESC'
      } else {
        this.queryParams.sortName = ''
        this.queryParams.order = ''
      }
      this.loadData()
    },
    // Dialog关闭
    handleAddClose: function(done) {
      this.resetForm('submitAddForm', 'add')
      done()
    },
    handleEditClose: function(done) {
      this.resetForm('submitEditForm', 'edit')
      done()
    },
    resetForm(formName, action) {
      // 表单重置
      try {
        this.$refs[formName] && this.$refs[formName].resetFields()
      } catch (e) {
        console.log('REST FORM FAILD: ' + e)
      }
      this.dialog[action].visible = false
    },
    // 每页记录数改变事件
    handleSizeChange(val) {
      this.queryParams.pageSize = val
      this.loadData()
    },
    // 改变当前页事件
    handleCurrentChange(val) {
      this.queryParams.curPage = val
      this.loadData()
    },
    formatEnum(vals, key) {
      if (this.quevo.isNull(vals)) {
        return false
      }
      const list = this.split(vals)
      let sv = ''
      list.forEach((val, i) => {
        if (val.startsWith(key)) {
          sv = val.split(':')
          return sv.length > 1 ? sv[1] : sv[0]
        }
      })
      return key
    },
    // 判断k是否存在于vals
    contain(k, vals) {
      if (this.quevo.isNull(k) || this.quevo.isNull(vals)) {
        return false
      }
      if (k === vals) {
        return true
      }
      const list = Array.isArray(vals) ? vals : this.split(vals)
      for (const i in list) {
        if (list[i] === k) {
          return true
        }
      }
      return false
    },
    toRouter(to) {
      if (!to) {
        return
      }
      this.$router.push(to)
    },
    toBack: function() {
      /* if (this.$route.path == '/') {
        this.handleLogout('目前已处于系统首页，确定将退出系统，是否继续？')
        return
      } */
      // this.$router.back(-1)
      window.history.length > 1 ? this.$router.go(-1) : this.$router.push('/')
    },
    init: function() {},
    loadSuccess: function(response) {},
    cleanInt: function(obj, propName, event) {
      const val = event.target.value
      if (!val || val <= 0) {
        obj[propName] = ''
        return
      }
      obj[propName] = (val + '').replace(/[^\d]*/g, '')
    }
  },
  computed: {
    tableHeight: function() {
      // return 'calc(100% + '+ (this.table.fillHeight + (this.isPage ? 0 : 48))+ 'px)'
      return (
        'calc(100% - ' +
        (this.table.fillHeight + (this.isPage ? 0 : -32)) +
        'px)'
      )
      // return document.body.clientHeight - this.table.fillHeight + (this.isPage ? 0 : 42)
    },
    pageLayout: function() {
      if (!process.client) {
        return this.pagination.layout
      }
      if (document.body.clientWidth <= 400) {
        return 'sizes, prev, next'
      }
      if (document.body.clientWidth <= 520) {
        return 'total,sizes, prev, next'
      }
      if (document.body.clientWidth <= 600) {
        return 'total, sizes, prev, next, jumper'
      }
      return this.pagination.layout
    }
  },
  mounted() {},
  created: function() {
    const option = this.$options.doNotInit
    if (!option && this.url != null && this.url !== '' && process.client) {
      // Object.assign(this.queryParams, this.$route.params)
      this.loadData(true)
      this.init()
      return
    }
    this.init()
  }
}
export default Mixin
